<template>
  <div class="support-container">
    <h2>求助客服</h2>

    <!-- 在线客服支持 -->
    <el-card class="support-card">
      <template #header>
        <div class="support-header">
          <span>在线客服支持</span>
          <el-tag type="success" effect="dark">工作时间: 周一至周五 9:00-18:00</el-tag>
        </div>
      </template>

      <!-- FAQ -->
      <div class="faq-header">
        <span>常见问题解答</span>
      </div>

      <el-row :gutter="20">
        <el-col :span="12" v-for="(faq, index) in faqList" :key="faq.id">
          <el-card class="faq-item" shadow="hover">
            <div class="faq-question" @click="expandedFAQ = expandedFAQ === faq.id ? null : faq.id">
              <el-icon :class="expandedFAQ === faq.id">
                <Message />
              </el-icon>
              <strong>{{ faq.question }}</strong>
            </div>
            <div class="faq-answer" v-show="expandedFAQ === faq.id">
              {{ faq.answer }}
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 支持表单 -->
      <div class="support-content">
        <p class="support-desc">
          如果您在使用过程中遇到任何问题，请填写以下表单提交支持请求，我们将尽快为您解决问题。
        </p>

        <el-form
            ref="supportFormRef"
            :model="supportForm"
            :rules="supportRules"
            label-width="100px"
            class="support-form"
        >
          <el-form-item label="问题类型" prop="type">
            <el-select
                v-model="supportForm.type"
                placeholder="请选择问题类型"
                style="width: 100%"
                class="custom-select"
            >
              <el-option label="任务问题" value="task" />
              <el-option label="账号问题" value="account" />
              <el-option label="支付问题" value="payment" />
              <el-option label="其他问题" value="other" />
            </el-select>
          </el-form-item>

          <el-form-item label="任务ID" prop="taskId" v-if="supportForm.type === 'task'">
            <el-input v-model="supportForm.taskId" placeholder="请输入任务ID" />
          </el-form-item>

          <el-form-item label="优先级" prop="priority">
            <el-radio-group v-model="supportForm.priority">
              <el-radio-button label="low">低</el-radio-button>
              <el-radio-button label="medium">中</el-radio-button>
              <el-radio-button label="high">高</el-radio-button>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="问题描述" prop="description">
            <el-input
                v-model="supportForm.description"
                type="textarea"
                :rows="6"
                placeholder="请详细描述您遇到的问题"
                class="custom-textarea"
            />
          </el-form-item>

          <el-form-item label="联系方式" prop="contact">
            <el-input v-model="supportForm.contact" placeholder="请输入手机号或邮箱" />
          </el-form-item>

          <el-form-item>
            <el-button
                type="primary"
                @click="submitSupportRequest"
                :loading="submitting"
                class="submit-btn"
            >
              提交支持请求
            </el-button>
            <el-button @click="resetForm" class="reset-btn">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

      <el-card class="support-requests-card">
      <template #header>
        <div class="support-header">
          <span>人工客服答疑</span>
          <div>
            <el-tag type="info">实时更新</el-tag>
            <el-button 
              type="primary" 
              :icon="Refresh" 
              @click="loadSupportRequests"
              class="refresh-btn"
              :loading="loadingRequests">
              刷新
            </el-button>
          </div>
        </div>
      </template>
      
      <el-table 
        :data="supportRequests" 
        v-loading="loadingRequests"
        style="width: 100%"
        border>
        <el-table-column prop="type" label="问题类型" width="120">
          <template #default="{row}">
            {{ typeMap[row.type] || row.type }}
          </template>
        </el-table-column>
        <el-table-column prop="priority" label="优先级" width="100">
          <template #default="{row}">
            <el-tag :type="priorityTagMap[row.priority]">
              {{ priorityMap[row.priority] }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="问题描述" min-width="200" />
        <el-table-column prop="contact" label="联系方式" width="150" />
        <el-table-column prop="createdAt" label="提交时间" width="180">
          <template #default="{row}">
            {{ formatDate(row.createdAt) }}
          </template>
        </el-table-column>

        <el-table-column label="回复内容" min-width="180">
          <template #default="{row}">
            <div v-if="row.replyStatus === ReplyStatus.REPLIED">
              {{ row.reply || '暂无回复内容' }}
            </div>
            <el-tag v-else type="info">请等待答复</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="回复状态" width="120">
          <template #default="{row}">
            <el-tag :type="row.replyStatus === ReplyStatus.REPLIED ? 'success' : 'info'">
              {{ row.replyStatus === ReplyStatus.REPLIED ? '已回复' : '待回复' }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 联系方式 -->
    <el-card class="contact-card" shadow="hover">
      <template #header>
        <div class="support-header">
          <span>其他联系方式</span>
        </div>
      </template>

      <div class="contact-list">
        <div class="contact-item">
          <el-icon><Phone /></el-icon>
          <span>客服电话：11111111</span>
        </div>
        <div class="contact-item">
          <el-icon><Message /></el-icon>
          <span>客服邮箱：11111@smartgig.com</span>
        </div>
        <div class="contact-item">
          <el-icon><Location /></el-icon>
          <span>公司地址：1111111</span>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Phone, Message, Location } from '@element-plus/icons-vue'
import { getAllFAQ } from '@/api/faq'
import { getSupportRequests, ReplyStatus,createSupportRequest } from '@/api/support' // 新增API引入
import { formatDate } from '@/utils/format' // 新增日期格式化

const faqList = ref([])
const loadingFAQ = ref(false)
const expandedFAQ = ref(null)
const supportFormRef = ref(null)
const submitting = ref(false)
const supportRequests = ref([])
const loadingRequests = ref(false)

const supportForm = ref({
  type: '',
  taskId: '',
  priority: 'medium',
  description: '',
  contact: ''
})

const supportRules = {
  type: [{ required: true, message: '请选择问题类型', trigger: 'change' }],
  taskId: [{ required: false }],
  priority: [{ required: true, message: '请选择优先级', trigger: 'change' }],
  description: [
    { required: true, message: '请描述您遇到的问题', trigger: 'blur' },
    { min: 10, message: '不能少于10个字', trigger: 'blur' }
  ],
  contact: [{ required: true, message: '请输入联系方式', trigger: 'blur' }]
}

// 新增类型映射
const typeMap = {
  task: '任务问题',
  account: '账号问题',
  payment: '支付问题',
  other: '其他问题'
}

const priorityMap = {
  low: '低',
  medium: '中',
  high: '高'
}

const priorityTagMap = {
  low: 'info',
  medium: 'warning',
  high: 'danger'
}

// 新增加载支持请求方法
const loadSupportRequests = async () => {
  loadingRequests.value = true
  try {
    const { data } = await getSupportRequests()
    supportRequests.value = data.map(item => ({
      ...item,
      reply: item.reply || '',  // 新增回复内容字段
      createdAt: formatDate(item.createdAt),
      replyStatus: item.reply ? ReplyStatus.REPLIED : ReplyStatus.PENDING
    }))
  } catch (error) {
    console.error('加载支持请求失败:', error)
    ElMessage.error('请求加载失败')
  } finally {
    loadingRequests.value = false
  }
}

const loadFAQ = async () => {
  try {
    const data = await getAllFAQ()
    faqList.value = data.sort((a, b) => a.sort_order - b.sort_order)
  } catch (e) {
    ElMessage.error('常见问题加载失败')
  }
}

onMounted(() => {
  loadFAQ()
  loadSupportRequests()
})

const submitSupportRequest = async () => {
  if (!supportFormRef.value) return
  await supportFormRef.value.validate(async (valid) => {
    if (valid) {
      submitting.value = true
      try {
        await createSupportRequest({
          ...supportForm.value,
          created_at: new Date().toISOString().slice(0, 19).replace('T', ' ')
        })
        ElMessage.success('请求已提交，我们会尽快联系您')
        resetForm()
      } catch (error) {
        ElMessage.error('提交失败，请稍后重试')
      } finally {
        submitting.value = false
      }
    }
  })
}

const resetForm = () => {
  if (supportFormRef.value) {
    supportFormRef.value.resetFields()
  }
}

</script>

<style scoped>
.support-container {
  padding: 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 100vh;
}

.support-container h2 {
  font-size: 26px;
  font-weight: bold;
  background: linear-gradient(to right, #6a11cb, #2575fc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(106, 17, 203, 0.2);
}

.support-card,
.contact-card {
  margin-bottom: 20px;
  border-radius: 12px;
  border: none;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(5px);
  transition: all 0.3s ease;
}

.support-card:hover,
.contact-card:hover {
  box-shadow: 0 6px 15px rgba(106, 17, 203, 0.15);
  transform: translateY(-2px);
}

.support-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 500;
  color: #3a3a3a;
}

.faq-header {
  background: linear-gradient(to right, rgba(106, 17, 203, 0.1), rgba(37, 117, 252, 0.1));
  color: #6a11cb;
  padding: 12px 15px;
  border-radius: 8px;
  margin: 15px 0;
  font-weight: 500;
  border-left: 3px solid #6a11cb;
}

.faq-item {
  margin-bottom: 15px;
  padding: 15px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  transition: all 0.3s ease;
  cursor: pointer;
}

.faq-item:hover {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 4px 12px rgba(106, 17, 203, 0.1);
}

.faq-question {
  font-size: 16px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #5a5a5a;
}

.faq-question:hover {
  color: #6a11cb;
}

.faq-answer {
  color: #606266;
  font-size: 14px;
  margin-top: 10px;
  padding-left: 24px;
  line-height: 1.6;
}

.rotate {
  transition: transform 0.3s ease;
  transform: rotate(90deg);
  color: #6a11cb;
}

.collapsed {
  transition: transform 0.3s ease;
  transform: rotate(0deg);
  color: #6a5acd;
}

.support-desc {
  margin: 20px 0 10px;
  color: #606266;
  line-height: 1.6;
  padding: 0 10px;
}

.support-form {
  max-width: 700px;
  margin: 0 auto;
  padding: 20px;
}

.contact-list {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  padding: 10px 0;
}

.contact-item {
  flex: 1 1 250px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.8);
  padding: 15px;
  border-radius: 10px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  color: #5a5a5a;
}

.contact-item:hover {
  background: rgba(255, 255, 255, 0.95);
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(106, 17, 203, 0.1);
  color: #6a11cb;
}

.contact-item .el-icon {
  font-size: 20px;
  color: #6a5acd;
}

.submit-btn {
  background: linear-gradient(to right, #6a11cb, #2575fc);
  border: none;
  padding: 10px 24px;
  transition: all 0.3s ease;
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(106, 17, 203, 0.3);
}

.reset-btn {
  padding: 10px 24px;
  transition: all 0.3s ease;
}

.reset-btn:hover {
  color: #6a11cb;
  border-color: #6a11cb;
  transform: translateY(-2px);
}

/* 优先级按钮组样式 */
:deep(.el-radio-button__inner) {
  border-radius: 8px !important;
  margin-right: 5px;
  transition: all 0.3s ease;
  border-left: 1px solid #dcdfe6 !important;
}

:deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
  background: linear-gradient(to right, #6a11cb, #2575fc);
  border-color: #6a11cb;
  color: white;
  box-shadow: 0 2px 6px rgba(106, 17, 203, 0.3);
}

:deep(.el-radio-button__inner:hover) {
  color: #6a11cb;
}

:deep(.el-radio-button:first-child .el-radio-button__inner) {
  border-radius: 8px 0 0 8px !important;
}

:deep(.el-radio-button:last-child .el-radio-button__inner) {
  border-radius: 0 8px 8px 0 !important;
}

:deep(.el-radio-group) {
  display: flex;
  gap: 5px;
}

/* 自定义表单元素样式 */


:deep(.el-select .el-input.is-focus .el-input__inner) {
  border-color: #6a11cb;
}

:deep(.el-select-dropdown__item.selected) {
  color: #6a11cb;
  font-weight: 500;
}

@media (max-width: 768px) {
  .support-form {
    max-width: 100%;
    padding: 10px;
  }

  .faq-item {
    margin-bottom: 15px;
  }

  .contact-item {
    flex: 1 1 100%;
  }

  .el-col {
    width: 100%;
    margin-bottom: 15px;
  }

  .support-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .el-form-item {
    margin-bottom: 18px;
  }
}
</style>